<template>
	<view>
		<view class="fixed-top">
			<view class="search zy-row">
				<input type="text" placeholder="请输入订单编号">
				<image src="/static/Input_icon_search.png"></image>
			</view>
			<v-tabs field="name" activeColor="#077B86" lineColor="#077B86" lineHeight="6rpx" :scroll="false"
				v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
		</view>

		<mescroll-body style="position: absolute;top: 178rpx;width: 100%;background-color: #F9F9F9;" ref="mescrollRef"
			@init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="zy-col">
				<view v-for="(item,index) in list" :key="index" class="zy-col list-item">
					<view class="zy-row">
						<!-- 查看图片详情 -->
						<!-- <view @click="navTo('/pages-order/order-details/img-details')" class="img-list">
							<image class="img" src="/static/order/ceshi.png"></image>
							<view class="img-details">
							</view>
							<text class="text">1/6</text>
						</view> -->
						<!-- 拍照接收 -->
						<view @click="navTo('/pages-order/update-img-order/update-img-order')" class="img-list">
							<image class="img" src="/static/order/ceshi.png"></image>
							<view class="img-details">
							</view>
							<text class="text">1/6</text>
						</view>
						<view class="zy-row item-up border-bottom" style="">
							<view class="zy-col item-right">
								<text class="item-title ellipsis-1">{{item.title}}</text>
								<text @click="navTo('/pages-order/order-details/order-details')" class="item-order">订单编号：{{item.orderId}}</text>
							</view>
							<view class="zy-col" style="margin-left: auto;justify-content: space-between;">
								<text class="status" :class="'status-'+item.status">{{statusList[item.status]}}</text>
								<image @click="changeShow(item)" v-if="!item.show"  class="status-img"
									src="/static/order/order_icon_list_up@2x.png"></image>
								<image @click="changeShow(item)" v-if="item.show" class="status-img"
									src="/static/order/order_icon_list_down@2x.png"></image>
							</view>
						</view>
					</view>
					<view v-if="item.show" class="zy-col item-bottom">
						<text>时间：{{item.creationTime}}</text>
						<text class="text-top">数量：{{item.count}}</text>
						<view class="zy-row text-top">
							<text style="min-width: 100rpx;">条形码：</text>
							<view class="zy-row item-right">
								<text v-for="(item1,index1) in item.barcode" :key="index1">{{item1}}</text>
							</view>
						</view>
					</view>
					<view v-if="item.show" class="zy-row item-btn">
						<view class="btn" style="margin-left: auto;">
							重打条形码
						</view>
						<view class="btn-activate" style="margin-left: 32rpx;">
							确认接收
						</view>
					</view>
				</view>
				<!-- <image v-if="!list.length" class="no-data-img" src="/static/image_default_graph.png" mode="widthFix"></image> -->
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				current: 0,
				tabs: [
					{
						name: '待接收',
						count:0,
					},
					{
						name: '待清洗',
						count:0,
					},
					{
						name: '待取件',
						count:0
					},
					{
						name: '全部',
						count:0
					},
				],
				statusList: ['待接收', '待清洗', '已取件', '已清洗'],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: true,
					textNoMore: "已经到底了～",
					empty: {
						tip: '暂无相关数据'
					}
				},
				list: [{
						imgUrl: "/static/order/order_icon_list_up@2x.png",
						title: "网鞋鞋面网鞋鞋面网鞋鞋面",
						orderId: "832938048230481384",
						status: 1,
						show: false,
						creationTime: "2022-05-31 10:56",
						count: 3,
						barcode: ['12345678', '12345679', '23121aaass', '2255qqq333']
					},
					{
						imgUrl: "/static/order/order_icon_list_up@2x.png",
						title: "豆豆鞋",
						orderId: "832938048230481384",
						status: 3,
						show: false,
						creationTime: "2022-01-21 11:56",
						count: 3,
						barcode: ['12345678', '12345679', '23121aaass', '2255qqq333']
					},
					{
						imgUrl: "/static/order/order_icon_list_up@2x.png",
						title: "哇哈哈",
						orderId: "832938048230481384",
						status: 2,
						show: false,
						creationTime: "2022-04-11 12:56",
						count: 3,
						barcode: ['12345678', '12345679', '23121aaass', '2255qqq333']
					}
				],
			};
		},
		methods: {
			changeShow(item){
				item.show = !item.show
				this.$forceUpdate()
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			},
			changeTab(index) {
				console.log('当前选中的项：' + index)
			},
			//刷新
			resetUpScroll() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			async upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }
				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.isInitxx){
				// 	apiGetxx().then(res=>{
				// 		this.isInitxx = true
				// 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// 	}).catch(()=>{
				// 		this.mescroll.endErr()
				// 	})
				// 	return // 此处return,先获取xx
				// }
				this.queryList(page);
				//联网加载数据
				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

				//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				//this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)

				//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
				//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

				//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
				//this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

			},
			//查询作业订单列表
			queryList(page) {
				// this.$util.doPostJson(this.$api.missionListUrl, {
				// 	memberId: getApp().globalData.userInfo.id,
				// 	userType: "2",
				// 	isAppEexecuting: "0",
				// 	pageSize: 10,
				// 	pageNumber: page.num
				// }, {}, true).then(res => {
				// 	uni.stopPullDownRefresh();
				// 	if (res.data.code == this.$ResponseStatus.OK) {
				// 		let dataList = res.data.data.list
				// 		dataList.forEach(item => {
				// 			item.distance = this.$util.getDistance(item.consigneeLongitude,
				// 			 item.consigneeLatitude,item.consignorLongitude,
				// 			  item.consignorLatitude);
				// 		})
				// 		this.$forceUpdate()
				// this.mescroll.endBySize(res.list.length, totalSize);
				setTimeout(() => {
					this.mescroll.endBySize(5, 10);
				}, 1000)

				// 		//设置列表数据
				// 		if (page.num == 1) this.orderList = []; //如果是第一页需手动制空列表
				// 		this.orderList = this.orderList.concat(dataList); //追加新数据
				// 	}
				// }).catch(error => {
				// 	console.log(error)
				// })

			}
		}
	}
</script>

<style lang="scss">
	.list-item {
		margin-top: 24rpx;
		padding: 0rpx 28rpx;
		padding-top: 20rpx;
		background-color: #fff;
		
		.img-list{
			position: relative;
			width: 128rpx;
			height: 128rpx;
			.img {
				width: 100%;
				height: 100%;
			}
			.img-details{
				position: absolute;
				z-index: 5;
				bottom: 0;
				right: 0;
				width: 64rpx;
				height: 38rpx;
				background: #000000;
				border-radius: 20rpx 0px 20rpx 20rpx;
				opacity: 0.38;
			}
			.text{
				position: absolute;
				z-index: 100;
				bottom: 0;
				right: 16rpx;
				font-size: 20rpx;
				color: #fff;
				line-height: 38rpx;
			}
		}
		
		.item-bottom {
			padding: 20rpx 0;
			margin-top: 18rpx;

			text {
				font-size: 24rpx;
				color: #666666;
			}

			.text-top {
				margin-top: 16rpx;
			}

			.item-right {
				width: 600rpx;
				flex-wrap: wrap;

				text {
					height: 42rpx;
					line-height: 42rpx;
					margin-right: 40rpx;
				}
			}
		}

		.item-up {
			justify-content: space-between;
			flex: 1;
			padding-bottom: 40rpx;

			.item-right {
				padding-top: 12rpx;
				padding-left: 20rpx;

				.item-title {
					width: 376rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #000000;
				}

				.item-order {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: $globalColor;
				}
			}
		}

		.item-btn {
			margin-top: 10rpx;
			padding-bottom: 24rpx;
			
		}



		.border-bottom {
			border-bottom: 2rpx dashed #F4F4F4;
			;
		}

		.status {
			font-size: 24rpx;

			&-0 {
				color: #FF2A44;
			}

			&-1 {
				color: #FF2A44;
			}

			&-2 {
				color: #999999;
			}

			&-3 {
				color: #999999;
			}
		}

		.status-img {
			width: 40rpx;
			height: 40rpx;
			margin-left: auto;
			margin-right: 18rpx;
		}
	}

	.fixed-top {
		width: 100%;
		position: fixed;
	}

	.search {
		width: 694rpx;
		height: 88rpx;
		background: #F9F9F9;
		border-radius: 44rpx;
		margin: 10rpx auto;
		padding: 24rpx 28rpx;
		justify-content: space-between;

		input {
			font-size: 28rpx;
		}

		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 12rpx;
		}
	}
</style>
